<template>
    <div class="cai" ref="cai" @scroll="binScroll">
    <div ref="box">
    <div class="contItem" v-for="(item,i) in data" :key="i">
        <div class="img">
            <img :src="item.r.img" alt="" @click="bint1(item.r.id)">
        </div>
        <div class="renshu">
            {{item.r.recommend_label}}
        </div>
        <div class="caiming">
            {{item.r.n}}
        </div>
    </div>
    </div>
    </div>
</template>

<script>
    export default {
        name:'caipu',
        data() {
            return {
                data:[],
                id:0,
                timer:0
            }
        },
        created(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/urecipes/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.list
            })
        },
        activated(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/urecipes/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.list
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.box.scrollHeight-this.$refs.cai.scrollTop===this.$refs.cai.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/user/urecipes/${this.id}/${length}/10`). then((response) => {
                            if (response.data.state=== "success") {
                                this.data.push(...response.data.result.list)  
                            }
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
        }
    }
</script>

<style lang="less" scoped>
    .cai{
        height: calc(100vh - 331px);
        overflow: auto;
    }
    .contItem{
        padding-bottom: 20px;
        .img{
            width: 100%;
            height: 200px;
            position: relative;
            overflow: hidden;
            img{
                position: absolute;
                width: 100%;
                // top:-10%
            }
        }
        .renshu{
            color: #6e6e6e;
            margin-top: 5px;
        }
        .caiming{
            margin-top: 10px;
        }
    }
</style>